import React from 'react'
import { Tag, Space } from 'antd'
import './index.css'
import { useSelector } from 'react-redux'

const CommonTag = () => {
  const tabList = useSelector(state => state.tab.tabList)
  const currentMenu = useSelector(state => state.tab.currentMenu)
  const handleClose = () => {
    console.log(tabList)
  }

  //tag显示的逻辑
  const setTag = (flag, item, index) => {
    return flag ? (
      <Tag color="#55ACEE" closeIcon onClose={() => handleClose()}>
        {item.label}
      </Tag>
    ) : (
      <Tag color="pink" key={item.name}>
        {item.label}
      </Tag>
    )
  }
  return (
    <Space className="common-tag" size={[0, 8]} wrap>
      {/* <Tag color="pink">首页</Tag>
      <Tag color="#55ACEE" closeIcon onClose={() => handleClose()}>
        用户列表
      </Tag> */}
      {currentMenu.name && tabList.map((item, index) => setTag(item.path === currentMenu.path, item, index))}
    </Space>
  )
}
 
export default CommonTag
